<template>
	<div class="yh_content foSi14 poRel">
		<div class="btn-group_top">
<!--			<el-button type="primary" class="mar-right10 bac6b7" size="small">导出失败数据</el-button>-->
			<el-button type="primary" class="bac6b7" @click.stop="back" size="small">返回列表</el-button>
		</div>
		<div class="import-from">
			<div class="import-from__item_sel mar dis disAl disJuC coFFF hei100">简奕约课模板</div>
		</div>
		<div v-if="identification === 0">
			<div class="member-import-file">
				<div class="import-file-sel dis disAl">
					<div class="inp-sel-file dis disAl ">{{upText === 1?'请选择文件':upText === 2?'数据处理中,请耐心等待..':'数据处理成功'}}
					</div>
					<el-upload action="#" :http-request="handleAvatarSuccess" class="upImg1">
						<div class="que coFFF cuPo" style="background: #6b7cdd;height: 40px;line-height: 40px;">选择文件
						</div>
					</el-upload>
				</div>
				<div class="wid100 dis disJuC">
					<div class="que coFFF cuPo" @click.stop="xiaClick"
						style="background: #6b7cdd;height: 40px;line-height: 40px;">下一步</div>
				</div>
			</div>
			<div class="normal-description">
				<div class="normal-description__title">批量导入会员卡需知</div>
				<div class="normal-description__content">
					<div class="normal-description__item">
						<span class="normal-description__sort">1、</span>
						<div class="normal-description__text">支持Excel（<span class="warn">.xls</span>）格式的文件；</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">2、</span>
						<div class="normal-description__text"><span class="warn">通用卡</span>请单独录入，批量导入会导致数据错误；</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">3、</span>
						<div class="normal-description__text">模板中 <span class="warn">*</span> 为必填项，其余项可以不填；如果该会员持有卡，
							<span class="alternative">*</span> 也为必填项；期限卡“卡实际余额”项不填，次数卡与储值卡必填；
						</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">4、</span>
						<div class="normal-description__text">支持一人多卡，详细格式参照模板；不支持导入请假状态的卡，请假状态的卡手动录入，或者恢复正常后再导入；</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">5、</span>
						<div class="normal-description__text">
							请确保你已经在系统里添加了正确的会籍顾问信息，系统不支持重名的员工，如果重名的员工请调整表格里名字与录入员工的姓名一致；</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">6、</span>
						<div class="normal-description__text">请确保手机号格式的正确性：13800138000；出生日期格式：19850909。不正确的格式将不能成功导入；
						</div>
					</div>
					<div class="normal-description__item">
						<span class="normal-description__sort">7、</span>
						<div class="normal-description__text">每次最多导入500条数据，如您的会员超出500人，请分批次导入；</div>
					</div>
				</div>
			</div>
<!--			<div class="import-file-down dis disAl disJuB">-->
<!--				<div class="file-down__item dis disAl">-->
<!--					<svg-icon icon-class="importTpl" class="mar0" style="width: 40px;height: 40px;" />-->
<!--					<span class="file-name">批量导入会员（有卡）模版.xls</span>-->
<!--					<span class="btn-down-tpl" data-type="1">点击下载</span>-->
<!--				</div>-->
<!--				<div class="file-down__item dis disAl">-->
<!--					<svg-icon icon-class="importTpl" class="mar0" style="width: 40px;height: 40px;" />-->
<!--					<span class="file-name">批量导入会员（无卡）模版.xls</span>-->
<!--					<span class="btn-down-tpl" data-type="0">点击下载</span>-->
<!--				</div>-->
<!--			</div>-->
		</div>
		<div v-if="identification === 1" style="padding-top: 60px;">
			<div class="m-import-msgbox">
				<p class="m-import-msg">
					共<span>{{list.data.length + list.lose_member.length}}</span>条数据，成功导入<span>{{list.data.length}}</span>条数据，<span>{{list.lose_member.length}}</span>条数据导入失败。你可以手动添加失败数据或调整后重新导入。</p>
			</div>
<!--			<div class="m-data">-->
<!--				<el-table :data="list.data.logs">-->
<!--					<el-table-column label="姓名/性别/手机号" width="260">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[0] }} / {{ scope.row[1] }} / {{ scope.row[2] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="当前积分">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[3] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="会籍顾问">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[4] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="入会时间">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[5] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="出生日期">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[6] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="证件类型">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[7] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="证件号码">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[8] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="渠道来源">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[9] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="* 卡类型">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[10] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="* 卡名称">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[11] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="卡号">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[12] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="发卡日期">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[13] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="开卡日期">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[14] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="有效期至">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[15] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="卡实际余额（次卡、储值卡必填）" width="260">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[16] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="初始余额（次卡、储值卡必填）" width="260">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[17] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="* 初始实收金额">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[18] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="备注">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[19] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="地址">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[20] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="会员卡备注">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[21] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="详细小区名称">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[22] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="职业类型">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[23] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="行为动态">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[24] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="婚姻情况">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[25] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="孕产情况">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[26] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="性格特征">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[27] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="收入情况">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[28] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column label="错误原因">-->
<!--						<template slot-scope="scope">-->
<!--							<div class="dis disAl">{{ scope.row[29] }}</div>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--				</el-table>-->
<!--				<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"-->
<!--					@pagination="getList" />-->
<!--			</div>-->
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo,
    getImportMemberCard
	} from '@/api/member'
  import { uploadimg } from '@/api/utils'
	export default {
		name: 'importMember',
		components: {Pagination},
		data() {
			return {
				upText: 1,
				identification: 0,
				listQuery: {
					page: 1,
					limit: 0
				},
				total: 0
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.type = Number(query.type)
			var xuanList = [{
				name: '批量导入',
				url: '/member/importMember',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
		},
		methods: {
			xiaClick() {
				if (this.upText === 3) {
					this.identification = 1
				} else {
					this.$message.error('数据处理中,请耐心等待..');
				}
			},
			back() {
				this.$router.go(-1)
			},
			getList(){},
			handleAvatarSuccess(file) {
        console.log(file);
				this.upText = 2
				let mf = new FormData()
				mf.append('file', file.file)
        getImportMemberCard(mf).then(response => {
					const {
						data
					} = response
          console.log(data.data);
          let datas = data
          this.upText = 3
          this.list = datas
				}).catch(error => {
          console.log(error)
          // this.listLoading = false
        })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 30px 63px;
	}

	.btn-group_top {
		text-align: right;
	}

	.import-from {
		position: absolute;
		top: 60px;
		left: 0;
		right: 0;
		height: 46px;
		border-bottom: 1px solid #d9d9d9;
		text-align: center;
	}

	.import-from__item_sel {
		width: 128px;
		background: #6b7cdd;
		border-radius: 4px 4px 0 0;
	}

	.member-import-file {
		padding-top: 70px;
	}

	.import-file-down {
		margin: 20px auto;
		width: 740px;
		height: 50px;
	}

	.file-down__item:first-child {
		padding-right: 43px;
		border-right: 1px solid #d9d9d9;
	}

	.file-down__item {
		padding: 5px 0;
		height: 40px;
		line-height: 40px;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.file-name {
		margin: 0 20px;
		height: 40px;
		line-height: 40px;
	}

	.btn-down-tpl {
		font-weight: 700;
		color: #6b7cdd;
		cursor: pointer;
	}

	.import-file-sel {
		margin: 40px auto;
		width: 450px;
		height: 40px;
	}

	.inp-sel-file {
		width: 330px;
		height: 40px;
		padding: 0 10px;
		margin-right: 10px;
		border: 1px solid #6b7cdd;
		color: #787878;
		box-sizing: border-box;
	}

	::v-deep .el-upload-list {
		display: none !important;
	}

	.normal-description {
		padding-top: 30px;
		margin-bottom: 5px;
	}

	.normal-description__title {
		font-size: 12px;
		color: #787878;
		height: 22px;
	}

	.normal-description__content {
		padding: 12px 20px;
		background: #f6f6f6;
		line-height: 30px;
	}

	.normal-description__item {
		position: relative;
		padding-left: 25px;
		line-height: 1.8;
	}

	.normal-description__sort {
		position: absolute;
		left: 0;
		top: 0;
	}

	.warn {
		color: #ff1f1f;
	}

	.m-import-msgbox {
		padding: 0 63px;
	}

	.m-import-msg {
		background: #fff;
		padding: 10px 20px;
	}

	.m-import-msg span {
		color: #ff1f1f;
		margin: 0 3px;
	}

	.m-import-msg .mark {
		color: #6b7cdd;
		cursor: pointer;
	}

	.m-data {
		padding: 0 63px 20px;
	}

	/* 设置滚动条宽度和高度 */
	::v-deep .el-table__body-wrapper::-webkit-scrollbar {
		width: 20px;
		/* 横向滚动条 */
		height: 8px;
		/* 纵向滚动条 必写 */
	}

	/* 设置滚动条样式 */
	::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
		background-color: #dde;
		border-radius: 3px;
	}

	::v-deep .el-table__row {
		background-color: #f2f2f2;
	}

	/* 修改鼠标经过表格的颜色 */
	::v-deep .el-table tbody tr:hover>td {
		background-color: #616b74 !important;
		color: #ffffff;
	}
	::v-deep .el-table th.is-leaf, .el-table td{
		border-bottom: none;
	}
	::v-deep .el-table::before{
		display: none;
	}
	::v-deep .el-table--scrollable-x .el-table__body-wrapper {
	    scrollbar-width: thin;
	}
</style>
